.thumbnailBox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnailBox :global(.next-icon) {
  color: #dedede;
}

.controlBox {
  display: flex;
  flex-wrap: wrap;
}

.node {
  padding: 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffee;
  border: 1px solid #888;
  border-radius: 2px;
  color: #333;
  overflow: hidden;
  font-size: 12px;
}

.node span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrowBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrowBox :global(.next-icon) {
  position: absolute;
  right: -4px;
}

.arrow {
  width: 100%;
  height: 1px;
  background-color: #dedede;
}

.topPart, .midPart, .bottomPart {
  position: relative;
  width: 100%;
}

.bottomPart :global(.next-icon) {
  position: absolute;
  left: -7px;
}

.topPart {
  border-right: 1px solid #dedede;
}
.midPart {
  height: 1px;
  background-color: #dedede;
}
.bottomPart {
  border-left: 1px solid #dedede;
}
